import { useState, useEffect } from "react";
import Style from "./NcSmsVerify.module.css";

import IconClose from "../../assets/close.svg";

function Header(props) {
  return (
    <div className={Style.Header}>
      <span>提示</span>
      <img src={IconClose} alt="" onClick={props.cancel} />
    </div>
  );
}

function Content(props) {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    setTimeout(() => {
      let s = seconds - 1;
      s > -1 && setSeconds(s);
    }, 1000);
  }, [seconds]);

  const send = () => {
    props.send(props.mobile);
    setSeconds(60);
  };

  const formatMobile = (val) => {
    if (!val) return val;
    if (typeof val !== "string") {
      val = String(val);
    }
    if (val.length !== 11) return val;
    return `${val.substr(0, 3)}****${val.substr(7)}`;
  };

  const input = (i, e) => {
    const v = e.target.value;
    props.input(i, v);
    if (!!v) {
      setTimeout(() => {
        const dom = document.getElementById(`numcode-sv-input-${++i}`);
        !!dom && dom.focus();
      }, 0);
    }
  };

  return (
    <div className={Style.Content}>
      <span>
        为了保障平台的数据安全和您的账号安全，请发送并输入短信验证码验证您的身份
      </span>
      {seconds > 0 ? (
        <div className={Style.DownTime}>
          <span>已发送验证码至{formatMobile(props.mobile)}</span>
          <span>{seconds}S</span>
        </div>
      ) : (
        <div className={Style.Sms}>
          <span>短信验证码</span>
          <span onClick={send}>发送验证码</span>
        </div>
      )}
      <div className={Style.Input}>
        {[0, 1, 2, 3, 4, 5].map((i) => {
          return (
            <input
              key={i.toString()}
              id={`numcode-sv-input-${i}`}
              maxLength={1}
              autoComplete="off"
              onChange={(e) => input(i, e)}
            />
          );
        })}
      </div>
    </div>
  );
}

function Warning() {
  return <div className={Style.Warning}>请输入正确的手机验证码</div>;
}

function Footer(props) {
  return (
    <div className={Style.Footer}>
      <span onClick={props.confirm}>确 定</span>
      <span onClick={props.cancel}>取 消</span>
    </div>
  );
}

function NcSmsVerify(props) {
  const [animation, setAnimation] = useState("fadeInDown");
  const [isWarning, setIsWaring] = useState(false);
  const [codes, setCodes] = useState([]);

  const send = () => {
    props.send();
  };

  const input = (i, e) => {
    const temp = [...codes];
    temp[i] = e;
    setCodes(temp);
    setIsWaring(false);
  };

  const cancel = () => {
    setAnimation("fadeOutDown");
    setTimeout(() => {
      props.close();
    }, 250);
  };

  const confirm = async () => {
    const isValid = codes.filter((c) => !!c).length === 6;
    if (isValid) {
      try {
        await props.confirm(codes.toString().replace(/,/g, ""));
        setAnimation("fadeOutDown");
        setTimeout(() => {
          props.close();
        }, 80);
      } catch (error) {}
    } else {
      setIsWaring(true);
    }
  };

  return (
    <div className={`${Style.NcSmsVerify} ${animation}`}>
      <div className={`${Style.Box} ${animation + "Y"} em`}>
        <Header cancel={cancel} />
        <Content mobile={props.mobile} input={input} send={send} />
        {isWarning ? <Warning /> : null}
        <Footer confirm={confirm} cancel={cancel} />
      </div>
    </div>
  );
}

export default NcSmsVerify;
